<template>
  <div class="renter-reservation component actWrap">
    <tab :line-width="2" :animate="false">
      <tab-item @on-item-click="onItemClick" selected>待同意</tab-item>
      <tab-item @on-item-click="onItemClick">已完成</tab-item>
    </tab>
    <!-- 待同意 -->
    <div class="reservation-list" v-if="tabIdx === 0">
      <div class="reservation-item" v-for="(item, index) in orderList[tabIdx]" :key="index">
        <div class="renter-info">
          <div class="renter-img"><img width="100%" :src="item.img || require('../../../images/avatar_default.png')" alt=""></div>
          <div class="renter-msg">
            <p>{{item.name || (item.webUser && item.webUser.trueName)}}<span class="renter-mobile">{{item.webUser && item.webUser.mobile}}</span></p>
            <p>预约时间：{{item.appointDate || ''}}&nbsp;{{item.appointTime ? item.appointTime.substring(0, 5) : ''}}</p>
          </div>
          <div class="renter-btn">
          </div>
        </div>
        <house-list v-if="item.housePersons" :houseInfo="item.housePersons" padding0="true"></house-list>
        <div class="bt-con">
          <x-button class="theme-bt bt-c" mini @click.native="updateReservation(item.id, '3')">拒绝</x-button>
          <x-button class="theme-bt bt-s bt-blue" mini @click.native="updateReservation(item.id, '0')">同意</x-button>
        </div>
      </div>
      <no-data v-show="orderList[tabIdx].length ===0"></no-data>
    </div>
    <!-- 已完成 -->
    <div class="reservation-list" v-show="tabIdx === 1" >
      <div class="reservation-item" v-for="(item, index) in orderList[tabIdx]" :key="index">
        <div class="renter-info">
          <div class="renter-img"><img width="100%" :src="item.img || require('../../../images/avatar_default.png')" alt=""></div>
          <div class="renter-msg">
            <p>{{item.name || (item.webUser && item.webUser.trueName)}}<span class="renter-mobile">{{item.webUser && item.webUser.mobile}}</span></p>
            <p>预约时间：{{item.appointDate || ''}}&nbsp;{{item.appointTime ? item.appointTime.substring(0, 5) : ''}}</p>
          </div>
          <div class="renter-status">
            <span style="color: #ff9600" v-if="item.status === 0">预约成功</span>
            <span style="color: #d4323f" v-else>已取消</span>
          </div>
        </div>
        <house-list v-if="item.housePersons" :houseInfo="item.housePersons" padding0="true"></house-list>
      </div>
      <no-data v-show="orderList[tabIdx].length ===0"></no-data>
    </div>
  </div>
</template>
<script>
  import houseList from '@/components/houseList'
  import noData from '@/components/noData'
  export default {
    components: {
      houseList,
      noData
    },
    data () {
      return {
        tabIdx: 0,
        orderList: {0: [], 1: []}
      }
    },
    created () {
      this.getData(0, '1')
    },
    methods: {
      // 预约状态：0-预约成功；3-已取消
      getData (idx, status) {
        console.log(idx, status)
        this.$axiosGeting(this.$api.renterAppointmentList, {
          page: '1',
          pageSize: '10',
          theUserType: '2',
          status
        }).then(json => {
          if (json.code === '0000') {
            this.orderList[idx] = json.data || []
          }
        })
      },
      onItemClick (index) {
        this.tabIdx = index
        if (this.orderList[index].length === 0) {
          switch (index) {
            // 待同意
            case 0: this.getData(index, '1'); break
            // 已完成
            case 1: this.getData(index, ''); break
          }
        }
      },
      // 更新预约信息
      updateReservation (id, status, landlordId, renterId, appointDate, appointTime) {
        let that = this
        if (status === '3') { // 拒绝
          that.$vux.confirm.show({
            title: '提示',
            content: '您确定拒绝与该租客的预约吗？',
            onConfirm () {
              that.updateData(id, status, landlordId, renterId, appointDate, appointTime)
            }
          })
        } else { // 同意
          that.updateData(id, status, landlordId, renterId, appointDate, appointTime)
        }
      },
      updateData (id, status, landlordId, renterId, appointDate, appointTime) {
        this.$axiosPosting(this.$api.updateRenterAppointment, {
          id, // 预约 id
          status, // 0-同意；3-拒绝
          landlordId, // 房东 Id
          createUserId: renterId, // 租客 Id
          appointDate, // 预约日期
          appointTime  // 预约时间
        }).then(json => {
          if (json.code === '0000') {
            if (status === '0') {
              this.$vux.toast.text('预约成功')
            } else {
              this.$vux.toast.text('已取消预约')
            }
            this.getData(this.tabIdx, '1')
          } else {
            this.$vux.toast.text(json.msg)
          }
        })
      }
    }
  }
</script>
<style lang="less">
  .renter-reservation{
    padding-top: 44px;
    .vux-tab {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 99;
    }
    .reservation-list{
      background: #f4f4f4;
      .tips {
        font-size: 15px;
        line-height: 3rem;
        color: #999;
        text-align: center;
      }
      .reservation-item{
        /*margin-bottom: .3rem;*/
        background: #fff;
        .renter-info{
          display: flex;
          height: 2rem;
          padding: 10px 0;
          margin: 0 15px;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #f4f4f4;
          &>div {
            flex: 0 1 auto;
          }
          .renter-img{
            width: 2rem;
            img{
              border-radius: 50%;
              vertical-align: top;
            }
          }
          .renter-msg{
            flex-grow: 1;
            padding-left: 8px;
            font-size: 12px;
            line-height: 1rem;
            .renter-mobile {
              margin-left: .6rem;
            }
          }
          .renter-status {
            font-size: 12px;
          }
          .renter-btn {
            line-height: 2rem;
            .weui-btn {
              margin-top: 0;
              vertical-align: middle;
            }
            .bt-c {
              border-color: #d4323f;
              color: #d4323f;
            }
          }
          .renter-status {
            text-align: right;
            padding-right: 18px;
            color: #999;
          }
        }
      }
      .ui-house-li {
        padding: 1.4rem 0;
      }
      .lt {
        font-size: 14px;
        padding-left: 4px;
        color: #999;
      }
    }
    .house {
      padding-top: 0;
    }
  }
  .bt-con{
    line-height: 28px;
    background-color: #fff;
    text-align: right;
    padding:15px 10px;
    border-top: 1px solid #f4f4f4;
    border-bottom: 6px solid #f4f4f4;
  }
  body .weui-btn.theme-bt{
    margin: 0;
    height: 28px;
    line-height: 28px;
    vertical-align: middle;
    padding: 0 25px;
    border-color: #ddd;
    color: #999;
  }
  body .weui-btn.bt-s.bt-blue{
    margin-left: 10px;
    border:1px solid #ff9600;
    background-color: #fff;
    color: #ff9600;
  }

</style>
